<template>
  <div v-if="pageNumber > 1" class="pager-container">
    <a @click="handleClick(1)" :class="{disabled:current===1}">|&lt;&lt;</a>
    <a @click="handleClick(current - 1)" :class="{disabled:current===1}">|&lt;&lt;</a>
    <a @click="handleClick(item)" v-for="(item,index) in numbers" :key="index" :class="{active: item === current}">{{item}}</a>
    <a @click="handleClick(current + 1)" :class="{disabled:current=== pageNumber}">&gt;&gt;|</a>
    <a @click="handleClick(pageNumber)" :class="{disabled:current=== pageNumber}">&gt;&gt;|</a>
  </div>

</template>

<script>
export default {
  name: 'index',
  props: {
    current: {
      // 当前页码
      type: Number,
      default: 1
    },
    total: {
      // 总数据量
      type: Number,
      default: 0
    },
    limit: {
      // 页容量
      type: Number,
      default: 10
    },
    visibleNumber: {
      // 可见页码数
      type: Number,
      default: 10
    }
  },
  computed: {
    pageNumber () {
      return Math.ceil(this.total / this.limit)
    },
    visibleMin () {
      let min = this.current - Math.floor(this.visibleNumber / 2)
      if (min < 1) {
        min = 1
      }
      return min
    },
    visibleMax () {
      let max = this.visibleMin + this.visibleNumber - 1
      if (max > this.pageNumber) {
        max = this.pageNumber
      }
      return max
    },
    numbers () {
      const nums = []
      let min = this.visibleMin
      if (this.visibleMax - this.visibleMin < this.visibleNumber - 1) {
        min = this.visibleMax - this.visibleNumber + 1
      }
      for (let i = min; i <= this.visibleMax; i++) {
        nums.push(i)
      }
      return nums
    }
  },
  methods: {
    handleClick (item) {
      if (item < 1 || item > this.pageNumber) {
        return
      }
      this.$emit('pageChange', item)
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/var.less";
  .pager-container{
    display: flex;
    justify-content: center;
    margin: 20px 0;
    a{
      color: @primary;
      margin: 0 6px;
      cursor: pointer;
      &.disabled{
        color: @lightWords;
        cursor: not-allowed;
      }
      &.active{
        color: @words;
        font-weight: bold;
        cursor: text;
      }
    }
  }
</style>
